<div *ngIf="contentData"
     class="container-fluid">
  <cd-info-group groupTitle="Status"
                 i18n-groupTitle
                 class="row info-group"
                 *ngIf="contentData.health?.status
                 || contentData.mon_status
                 || contentData.osd_map
                 || contentData.mgr_map
                 || contentData.hosts != null
                 || contentData.rgw != null
                 || contentData.fs_map
                 || contentData.iscsi_daemons != null">

    <cd-info-card cardTitle="Cluster Status"
                  i18n-cardTitle
                  class="col-sm-6 col-md-4 col-lg-3"
                  [contentClass]="contentData.health?.checks?.length > 0 ? 'content-highlight text-area-size-2' : 'content-highlight'"
                  *ngIf="contentData.health?.status">
      <ng-container *ngIf="contentData.health?.checks?.length > 0">
        <ng-template #healthChecks>
          <p class="logs-link"
             i18n>&rarr; See <a (click)="viewportScroller.scrollToAnchor('logs')">Logs</a> for more details.</p>
          <ul>
            <li *ngFor="let check of contentData.health.checks">
              <span [ngStyle]="check.severity | healthColor">{{ check.type }}</span>: {{ check.summary.message }}
            </li>
          </ul>
        </ng-template>
        <div class="info-card-content-clickable"
             [ngStyle]="contentData.health.status | healthColor"
             [popover]="healthChecks"
             triggers=""
             #healthChecksTarget="bs-popover"
             placement="bottom"
             container="body"
             containerClass="info-card-popover-cluster-status"
             (click)="healthChecksTarget.toggle()">
          {{ contentData.health.status }}
        </div>
      </ng-container>
      <ng-container *ngIf="contentData.health?.checks?.length == 0">
        <div [ngStyle]="contentData.health.status | healthColor">
          {{ contentData.health.status }}
        </div>
      </ng-container>
    </cd-info-card>

    <cd-info-card cardTitle="Monitors"
                  i18n-cardTitle
                  link="/monitor"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-highlight"
                  *ngIf="contentData.mon_status">
      {{ contentData.mon_status | monSummary }}
    </cd-info-card>

    <cd-info-card cardTitle="OSDs"
                  i18n-cardTitle
                  link="/osd"
                  class="col-sm-6 col-md-4 col-lg-3"
                  *ngIf="(contentData.osd_map | osdSummary) as transformedResult"
                  [contentClass]="(transformedResult.length == 5 ? 'text-area-size-3' : 'text-area-size-2') + ' content-highlight'">
      <span *ngFor="let result of transformedResult"
            [ngClass]="result.class">
        {{ result.content }}
      </span>
    </cd-info-card>

    <cd-info-card cardTitle="Manager Daemons"
                  i18n-cardTitle
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-highlight text-area-size-2"
                  *ngIf="contentData.mgr_map">
      <span *ngFor="let result of (contentData.mgr_map | mgrSummary)"
            [ngClass]="result.class"
            [title]="result.titleText != null ? result.titleText : ''">
        {{ result.content }}
      </span>
    </cd-info-card>

    <cd-info-card cardTitle="Hosts"
                  i18n-cardTitle
                  link="/hosts"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-medium content-highlight"
                  *ngIf="contentData.hosts != null">
      {{ contentData.hosts }} total
    </cd-info-card>

    <cd-info-card cardTitle="Object Gateways"
                  i18n-cardTitle
                  link="/rgw/daemon"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-medium content-highlight"
                  *ngIf="contentData.rgw != null">
      {{ contentData.rgw }} total
    </cd-info-card>
    <cd-info-card cardTitle="Metadata Servers"
                  i18n-cardTitle
                  class="col-sm-6 col-md-4 col-lg-3"
                  *ngIf="(contentData.fs_map | mdsSummary) as transformedResult"
                  [contentClass]="(transformedResult.length > 1 ? 'text-area-size-2' : '') + ' content-highlight'">
      <span *ngFor="let result of transformedResult"
            [ngClass]="result.class">
        {{ result.content }}
      </span>
    </cd-info-card>

    <cd-info-card cardTitle="iSCSI Gateways"
                  i18n-cardTitle
                  link="/block/iscsi"
                  class="col-sm-6 col-md-4 col-lg-3"
                  contentClass="content-medium content-highlight"
                  *ngIf="contentData.iscsi_daemons != null">
      {{ contentData.iscsi_daemons }} total
    </cd-info-card>
  </cd-info-group>

  <cd-info-group groupTitle="Performance"
                 i18n-groupTitle
                 class="row info-group"
                 *ngIf="contentData.client_perf || contentData.scrub_status">

    <div class="cd-container-flex">
      <cd-info-card cardTitle="Client IOPS"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="contentData.client_perf">
        {{ (contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) | round:1 }}
      </cd-info-card>

      <cd-info-card cardTitle="Client Throughput"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="contentData.client_perf">
        {{ ((contentData.client_perf.read_bytes_sec + contentData.client_perf.write_bytes_sec) | dimlessBinary) + '/s' }}
      </cd-info-card>

      <cd-info-card cardTitle="Client Read/Write"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    [contentClass]="(contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) <= 0 ? 'content-medium content-highlight' : 'content-chart'"
                    *ngIf="contentData.client_perf">
        <cd-health-pie *ngIf="(contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) > 0"
                       [data]="contentData"
                       [isBytesData]="false"
                       chartType="pie"
                       [displayLegend]="true"
                       (prepareFn)="prepareReadWriteRatio($event[0], $event[1])">
        </cd-health-pie>
        <span *ngIf="(contentData.client_perf.read_op_per_sec + contentData.client_perf.write_op_per_sec) <= 0">
          N/A
        </span>
      </cd-info-card>

      <cd-info-card cardTitle="Client Recovery"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="contentData.client_perf">
        {{ (contentData.client_perf.recovering_bytes_per_sec | dimlessBinary) + '/s' }}
      </cd-info-card>

      <cd-info-card cardTitle="Scrub"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="contentData.scrub_status">
        {{ contentData.scrub_status }}
      </cd-info-card>
    </div>
  </cd-info-group>

  <cd-info-group groupTitle="Capacity"
                 i18n-groupTitle
                 class="row info-group"
                 *ngIf="contentData.pools
                 || contentData.df
                 || contentData.df?.stats?.total_objects != null
                 || contentData.pg_info">

    <div class="cd-container-flex">
      <cd-info-card cardTitle="Pools"
                    i18n-cardTitle
                    link="/pool"
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="contentData.pools">
        {{ contentData.pools.length }}
      </cd-info-card>

      <cd-info-card cardTitle="Raw Capacity"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-chart"
                    *ngIf="contentData.df">
        <cd-health-pie [data]="contentData"
                       [isBytesData]="true"
                       [displayLegend]="true"
                       (prepareFn)="prepareRawUsage($event[0], $event[1])">
        </cd-health-pie>
      </cd-info-card>

      <cd-info-card cardTitle="Objects"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="contentData.df?.stats?.total_objects != null">
        {{ contentData.df?.stats?.total_objects }}
      </cd-info-card>

      <cd-info-card cardTitle="PGs per OSD"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-medium content-highlight"
                    *ngIf="contentData.pg_info">
        {{ contentData.pg_info.pgs_per_osd | dimless }}
      </cd-info-card>

      <cd-info-card cardTitle="PG Status"
                    i18n-cardTitle
                    class="cd-col-5"
                    cardClass="card-medium"
                    contentClass="content-chart"
                    (click)="pgStatusTarget.toggle()"
                    *ngIf="contentData.pg_info">
        <ng-template #pgStatus>
          <p class="logs-link"
             i18n>&rarr; See <a (click)="viewportScroller.scrollToAnchor('logs')">Logs</a> for more details.</p>
          <ul>
            <li *ngFor="let pgStatesText of contentData.pg_info.statuses | keyvalue">
              {{ pgStatesText.key }}: {{ pgStatesText.value }}
            </li>
          </ul>
        </ng-template>
        <div class="pg-status-popover-wrapper">
          <div [popover]="pgStatus"
               triggers=""
               #pgStatusTarget="bs-popover"
               placement="bottom">
            <cd-health-pie [data]="contentData"
                           chartType="pie"
                           [displayLegend]="true"
                           (prepareFn)="preparePgStatus($event[0], $event[1])">
            </cd-health-pie>
          </div>
        </div>
      </cd-info-card>
    </div>
  </cd-info-group>

  <cd-info-group groupTitle="Logs"
                 i18n-groupTitle
                 class="row info-group"
                 id="logs"
                 *ngIf="contentData.clog || contentData.audit_log">

    <cd-info-card cardTitle="Cluster"
                  i18n-cardTitle
                  class="col-md-12 col-lg-6"
                  cardClass="card-medium"
                  contentClass="no-center scroll text-monospace"
                  *ngIf="contentData.clog">
      <p *ngFor="let line of contentData.clog">
        {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
        <span [ngStyle]="line | logColor">
          {{ line.message }}
          <br>
        </span>
      </p>
    </cd-info-card>
    <cd-info-card cardTitle="Audit"
                  i18n-cardTitle
                  class="col-md-12 col-lg-6"
                  cardClass="card-medium"
                  contentClass="no-center scroll text-monospace"
                  *ngIf="contentData.audit_log">
      <p *ngFor="let line of contentData.audit_log">
        {{ line.stamp }}&nbsp;{{ line.priority }}&nbsp;
        <span [ngStyle]="line | logColor">
          <span style="font-weight: bold;">
            {{ line.message }}
          </span>
          <br>
        </span>
      </p>
    </cd-info-card>
  </cd-info-group>
</div>
